<template>
  <div class="toolbar">
    <div class="box">
      <div
        :class="[
          'item',
          {
            'active-item': activeToorbar && activeToorbar.icon === toolbar.icon,
          },
        ]"
        v-for="(toolbar, index) in toolbarList"
        :key="index"
        @click="clickToorbar(toolbar)"
      >
        <div
          :class="[
            'img-box',
            { active: activeToorbar && activeToorbar.icon === toolbar.icon },
          ]"
        >
          <img
            :src="require(`@/assets/home/bottom/toolbar/${toolbar.icon}.png`)"
          />
        </div>
        <div
          ref="children"
          :class="[
            'children',
            {
              'active-children':
                activeToorbar && activeToorbar.icon === toolbar.icon,
            },
          ]"
          :style="`width: ${toolbar.width}`"
        >
          <div
            :class="['child']"
            v-for="(child, index) in toolbar.children"
            :key="index"
            @click.stop="clickChild(child)"
          >
            <div
              :class="[
                'child-box',
                {
                  'active-child':
                    activeChild &&
                    activeChild.icon === child.icon &&
                    child.canActive,
                },
              ]"
            >
              <!-- <span>{{
                `@/assets/home/bottom/toolbar/${child.icon}.png`
              }}</span> -->
              <!-- <img
                :src="require(`@/assets/home/bottom/toolbar/${child.icon}.png`)"
              /> -->

              <img
                :src="require(`@/assets/home/bottom/toolbar/${child.icon}.png`)"
                alt=""
              />
              <span style="margin-left: 4px">{{ child.text }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-camera" v-if="!fullScreen && interactiveMode !== 'walk'">
      <div class="arr-left" @click="leftBtnClick()" v-show="showArr">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="camera" ref="camera">
        <div class="camera-box" ref="cameraBox">
          <div
            class="camera-item"
            :class="item.Id === cameraActive ? 'active' : ''"
            v-for="(item, index) in CameraTourList"
            :key="item.Id"
            @click="operation(item, index, item.hasVideo)"
            :title="item.Text"
            v-show="CameraTourList.length > 0"
          >
            <i
              class="el-icon-connection camera-link"
              v-show="item.hasVideo"
            ></i>
            {{ item.Text }}
          </div>
          <div
            class="camera-item"
            :class="item.Id === cameraActive ? 'active' : ''"
            v-for="(item, index) in cameraTourListView"
            :key="item.Id"
            @click="operation(item, index, item.hasVideo)"
            :title="item.Text"
            v-show="CameraTourList.length === 0"
          >
            <i
              class="el-icon-connection camera-link"
              v-show="item.hasVideo"
            ></i>
            {{ item.Text }}
          </div>
        </div>
      </div>
      <div class="arr-right" @click="rightBtnClick()" v-show="showArr">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>

    <div class="bottom bg-blur"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";

@Component({
  name: "ToolBar",
  components: {},
})
export default class BottomToolBar extends Vue {
  public activeToorbar: any = null;
  public activeChild: any = null;
  private cameraPostSpeed = {
    disSpeed: 0.2,
    angleSpeed: 1,
  };
  private screen: any = "";
  public toolbarList: any = [
    {
      text: "天气特效",
      icon: "4",
      methods: "",
      data: {},
      children: [
        {
          text: "晴天",
          icon: "4-1",
          methods: "weatherClick",
          data: "晴天",
        },
        {
          text: "雨天",
          icon: "4-2",
          methods: "weatherClick",
          data: "雨天",
        },
        {
          text: "雪天",
          icon: "4-3",
          methods: "weatherClick",
          data: "雪天",
        },
      ],
    },
    {
      text: "浏览漫游",
      icon: "3",
      methods: "",
      data: {},
      children: [
        {
          text: "盘旋",
          icon: "3-3",
          methods: "circleLook",
          data: {},
        },
        {
          text: "环视",
          icon: "3-4",
          methods: "lookAround",
          data: {},
        },
        {
          text: "动画导航",
          icon: "3-1",
          methods: "addPanel",
          data: {
            panelId: "dhdh",
            text: "动画导航",
            type: "dhdh",
          },
        },
        {
          text: "特定场景",
          icon: "3-2",
          methods: "lookAt",
          data: {
            panelId: "tdcj",
            text: "特定场景",
            type: "tdcj",
          },
        },
        {
          text: "正北",
          icon: "正北_白色",
          methods: "lookNorth",
          data: {},
        },
        {
          text: "俯视",
          icon: "俯视_白色",
          methods: "lookUnder",
          data: {},
        },
        {
          text: "出图",
          icon: "出图_白色",
          methods: "exportMap",
          data: {},
        },
      ],
    },
    {
      text: "创建对象",
      icon: "5",
      methods: "",
      data: "",
      children: [
        {
          text: "创建点",
          icon: "5-1",
          methods: "createPoint",
          data: {
            panelId: "cjd",
            text: "创建点",
            type: "cjd",
            data: {
              text: "创建点",
              id: "cjd",
            },
          },
        },
        {
          text: "创建线",
          icon: "5-2",
          methods: "plantCreate",
          data: {
            panelId: "cjx",
            text: "创建线",
            type: "cjx",
            data: {
              text: "创建线",
              id: "cjx",
            },
          },
        },
        {
          text: "创建面",
          icon: "5-3",
          methods: "createSurface",
          data: {
            panelId: "cjm",
            text: "创建面",
            type: "cjm",
            data: {
              text: "创建面",
              id: "cjm",
            },
          },
        },
        {
          text: "创建体块",
          icon: "5-4",
          methods: "createBody",
          data: {
            panelId: "cjtk",
            text: "创建体块",
            type: "cjtk",
            data: {
              text: "创建体块",
              id: "cjtk",
            },
          },
        },
        {
          text: "创建标注",
          icon: "5-1",
          methods: "createMarker",
          data: {
            panelId: "cjtag",
            text: "创建标注",
            type: "cjtag",
            data: {
              text: "创建标注",
              id: "cjtag",
            },
          },
        },
      ],
    },
    {
      text: "空间测量",
      icon: "2",
      methods: "clickHandle",
      data: "清除测量",
      children: [
        {
          text: "坐标",
          icon: "2-1",
          methods: "clickHandle",
          data: "坐标测量",
        },
        {
          text: "直线测量",
          icon: "2-2",
          methods: "clickHandle",
          data: "直线测量",
        },
        {
          text: "水平测量",
          icon: "2-3",
          methods: "clickHandle",
          data: "水平测量",
        },
        {
          text: "垂直测量",
          icon: "2-4",
          methods: "clickHandle",
          data: "垂直测量",
        },
        {
          text: "面积测量",
          icon: "2-5",
          methods: "clickHandle",
          data: "面积测量",
        },
        {
          text: "坡度测量",
          icon: "2-5",
          methods: "clickHandle",
          data: "坡度测量",
        },
      ],
    },
    {
      text: "规划分析",
      icon: "1",
      methods: "",
      data: {},
      children: [
        {
          text: "视域分析",
          icon: "1-1",
          methods: "planningAnalysis",
          data: {
            panelId: "syfx",
            text: "视域分析",
            type: "syfx",
            data: {
              text: "视域分析",
              id: "syfx",
            },
          },
        },

        // {
        //   text: "阴影模拟",
        //   icon: "1-7",
        //   methods: "simulateTime",
        //   canActive: true,
        //   type: "time",
        //   data: {},
        // },
      ],
    },
  ];

  private showFixedNav = false;
  private fixedActive = "";
  public showArr = false;
  get cameraActive() {
    return true;
  }
  get activeProject() {
    return true;
  }

  get interactiveMode() {
    return true;
  }
  // eslint-disable-next-line getter-return
  get CameraTourList() {
    return true;
  }
  get videoPath() {
    return true;
  }
  get activeMeetingwithPlan() {
    return true;
  }
  @Watch("CameraTourList")
  CameraTourListChange(val: any) {
    return true;
  }
  @Watch("fullScreen")
  fullScreenChange(val: any) {
    return true;
    // if (!val) {
    //   if (this.CameraTourList.length || this.cameraTourListView.length > 0) {
    //     this.$nextTick(() => {
    //       const box = (this.$refs.cameraBox as any).offsetWidth;
    //       const camera = (this.$refs.camera as any).offsetWidth;
    //       if (box > camera) {
    //         this.showArr = true;
    //       } else {
    //       }
    //     });
    //   } else {
    //     this.showArr = false;
    //   }
    //   setTimeout(() => {
    //     const box = this.$refs.cameraBox as any;
    //     if (box) {
    //       box.style.left = 0;
    //     }
    //   });
    // }
  }
  showLink(item: any) {
    if (item.hasVideo === undefined) {
      const file: any =
        "/video" +
        this.videoPath +
        "/" +
        (this.activeMeetingwithPlan || "方案一") +
        "/" +
        item.Text +
        ".mp4";
      const xhr = new XMLHttpRequest();
      xhr.open("HEAD", file, false);
      xhr.send();
      item.hasVideo = xhr.status !== 404;
      return item.hasVideo;
    } else {
      return item.hasVideo;
    }
  }
  leftBtnClick() {
    const box = this.$refs.cameraBox as any;
    const number = box.offsetLeft + 200;
    if (number > 0) {
      box.style.left = 0;
    } else {
      box.style.left = number + "px";
    }
  }
  rightBtnClick() {
    const camera = this.$refs.camera as any;
    const box = this.$refs.cameraBox as any;
    if (Math.abs(box.offsetLeft) >= box.offsetWidth - camera.offsetWidth) {
      return false;
    } else {
      box.style.left = box.offsetLeft - 200 + "px";
    }
  }

  lookNorth() {
    return true;
    // if (MarsModule.mars?.workspace.acApi) {
    //   (MarsModule.mars?.workspace.acApi as any).camera.get((res: any) => {
    //     (MarsModule.mars?.workspace.acApi as any).camera.set(
    //       res.x,
    //       res.y,
    //       res.z,
    //       res.pitch,
    //       90,
    //       2
    //     );
    //   });
    // }
  }

  lookUnder() {
    return true;
    // if (MarsModule.mars?.workspace.acApi) {
    //   (MarsModule.mars?.workspace.acApi as any).camera.get((res: any) => {
    //     (MarsModule.mars?.workspace.acApi as any).camera.set(
    //       res.x,
    //       res.y,
    //       res.z,
    //       -90,
    //       res.yaw,
    //       2
    //     );
    //   });
    // }
  }

  exportMap() {
    const divPlayer: any = document.querySelector("#streamingVideo");
    let video: any = divPlayer || "";
    // const video: any = divPlayer
    const canvas: any = document.createElement("canvas");
    canvas.width = document.body.offsetWidth;
    canvas.height = document.body.offsetHeight;
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
    const url = canvas.toDataURL("image/png");
    canvas;
    const a = document.createElement("a");
    a.setAttribute("href", url);
    a.style.display = "none";
    document.body.appendChild(a);
    a.setAttribute("download", "出图");
    a.click();
    document.body.removeChild(a);
  }

  visiblityAnalysis(data: any) {
    return true;
  }

  createPoint(data: any) {
    return true;
  }

  public async clickToorbar(toolbar: any) {
    if (this.activeChild) {
      this.activeChild.showClock = false;
      this.activeChild.time = 0;
    }
    this.activeChild = null;
    if (this.activeToorbar && toolbar.icon === this.activeToorbar.icon) {
      //点击已激活的 收起来

      if (toolbar?.methods) {
        (this as any)[toolbar.methods](toolbar.data);
      }
      this.activeToorbar = null;
      //   HomeModule.setTipsText(null);
    } else {
      //点击未激活的去激活
      this.activeToorbar = toolbar;
    }
    let prevPositions = this.getRects(this.$refs.children);
    this.toolbarList.forEach((e: any) => {
      e.width = 0;
    });
    if (this.activeToorbar) {
      toolbar.width = "auto";
    }
    this.$nextTick(() => {
      const currentPositions = this.getRects(this.$refs.children);
      let childrenElement: any = this.$refs.children as any;
      childrenElement.forEach((e: any, index: number) => {
        const keyframes = [
          { width: `${prevPositions[index].width}px` },
          { width: `${currentPositions[index].width}px` },
        ];
        const options = {
          duration: 300,
          easing: "cubic-bezier(0,0,0.32,1)",
        };
        e.animate(keyframes, options);
      });
    });
  }

  private showBmcsList(item: any) {
    this.addPanel(item);
  }

  private getRects(doms: any) {
    return doms.map((dom: any) => {
      const rect = dom.getBoundingClientRect();
      const { width } = rect;
      return { width };
    });
  }

  public clickChild(child: any) {
    // HomeModule.setTipsText(null);
    if (this.activeChild) {
      this.activeChild.showClock = false;
      this.activeChild.time = 0;
    }
    this.activeChild = child;
    if (this.activeChild.type === "time") {
      this.activeChild.showClock = true;
    }
    if (child.methods) {
      (this as any)[child.methods](child.data);
    }
  }

  public showToolbar2 = false;
  public toolbarList2: any = [];
  public activeToolbar1: any = null;
  public activeToolbar2: any = null;
  public show = false;
  public Yaw = -90;
  private screenshotSrc = "";
  // private showScreenshot = false;
  private navigationList: any = [];
  private cameraTourListView = [];
  get panelList() {
    return true;
  }
  get weather() {
    return true;
  }

  get fullScreen() {
    return true;
  }

  get isCtrl() {
    return true;
  }

  get showScreenshot() {
    return true;
  }

  @Watch("weather", { deep: true, immediate: true })
  onWeatherChange(val: any) {}
  keyDown() {
    // 键盘按下事件
    document.onkeydown = (e) => {
      //事件对象兼容
      const e1 =
        e || event || window.event || arguments.callee.caller.arguments[0];
      //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40  回车：13   ctrl：17   shift：16
      if (e1.keyCode === 17) {
      }
    };
    // 键盘抬起事件
    document.onkeyup = (e) => {
      //事件对象兼容
      const e1 =
        e || event || window.event || arguments.callee.caller.arguments[0];
      if (e1.keyCode === 17) {
      }
      if (e1.keyCode === 27) {
        if (this.showScreenshot) {
          (document.getElementById("screenShotContainer") as any).remove();
        }
      }
    };
  }

  private async mounted() {
    // console.log('视频开始加载...', this.CameraTourList , this.videoPath)
    // const res = await this.getFixedCameraTourList();
    // setTimeout(() => {
    //   HomeModule.setLoadVideo(true);
    //   res.forEach((item: any) => {
    //     this.showLink(item);
    //   });
    //   this.cameraTourListView = res;
    // }, 2000);
  }

  public clickToolbar(toolbar: any) {
    this.show = true;
    if (toolbar.icon === this.activeToolbar1?.icon) {
      this.activeToolbar1 = null;
      this.showToolbar2 = false;
    } else {
      this.showToolbar2 = true;
      this.activeToolbar1 = toolbar;
      this.toolbarList2 = toolbar.children;
    }
  }

  public clickToolbar2(toolbar2: any) {
    if (toolbar2.icon === this.activeToolbar2?.icon) {
      // this.activeToolbar2 = null
    } else {
      this.activeToolbar2 = toolbar2;
    }
    if (toolbar2.methods) {
      (this as any)[toolbar2.methods](toolbar2.data);
    }
  }

  handleCommand(command: any) {
    if (command.methods) {
      (this as any)[command.methods](command.data);
    }
  }

  async addtag() {}

  plantCreate(data: any) {
    return true;
  }
  clearTip() {
    return true;
  }
  //结束需要选择点的功能
  endSelectPonitFuntion() {
    return true;
  }
  circleLook() {
    this.endSelectPonitFuntion();
  }
  lookAround() {
    return true;
  }

  weatherClick(data: any) {
    return true;
    // switch (data) {
    //   case "晴天":
    //     {
    //       PanelModule.setWeather(null);
    //     }
    //     break;
    //   case "雨天":
    //     {
    //       PanelModule.setWeather({ value: 25, type: "雨天" });
    //     }
    //     break;
    //   case "雪天":
    //     {
    //       PanelModule.setWeather({ value: 25, type: "雪天" });
    //     }
    //     break;
    //   case "云层":
    //     {
    //       PanelModule.setWeather({ value: 25, type: "云层" });
    //     }
    //     break;
    // }
  }

  //   simulateTime() {
  //     this.shadow();
  //   }

  async addPanel(data: any) {
    // HomeModule.setActiveProject(null);
    // this.deleteProjectPanel();
    // HomeModule.addPanel(data);
    // 测试代码
    // const b1=new bca();
    // b1.autoTourPlay()
  }

  deleteProjectPanel() {
    // let ProjectPanel = this.panelList.find((val) => val.type === "project");
    // if (ProjectPanel) HomeModule.deletePanel(ProjectPanel?.panelId);
  }

  async mainView() {
    // await Workspace.instance.projectManager?.currentPrjInfo.acApi.camera.set(45952.417969, 98342, 15000, -90, -90, 0);
  }

  //   createBody(data: IPanel) {
  //     // HomeModule.setActiveProject(null);
  //     // this.deleteProjectPanel();
  //     HomeModule.addPanel(data);
  //   }

  //   createMarker(data: IPanel) {
  //     // HomeModule.setActiveProject(null);
  //     // this.deleteProjectPanel();
  //     HomeModule.addPanel(data);
  //   }

  //   createSurface(data: IPanel) {
  //     // HomeModule.setActiveProject(null);
  //     // this.deleteProjectPanel();
  //     HomeModule.addPanel(data);
  //   }

  //   planningAnalysis(data: IPanel) {
  //     // HomeModule.setActiveProject(null);
  //     // this.deleteProjectPanel();
  //     // if (data.text === '视域分析') {
  //     //   HomeModule.setTipsText('请先选择分析参数，点击‘选择区域’开始分析，再在场景中选择观测点！');
  //     // }

  //     // if (data.text === '视域分析') {
  //     //   HomeModule.setTipsText('请先选择分析参数，点击‘选择区域’开始分析，再在场景中选择观测点！');
  //     // }

  //     HomeModule.setTipsText(
  //       "请先选择分析参数，点击‘选择区域’开始分析，再在场景中选择观测点！"
  //     );
  //     HomeModule.addPanel(data);
  //     // const viewshedAnalysisTrans = new ViewshedAnalysis();
  //     // Workspace.instance.transManager?.transStart(viewshedAnalysisTrans);
  //   }

  //   observe(data: IPanel) {
  //     HomeModule.addPanel(data);
  //   }

  //   clickHandle(data: any) {
  //     HomeModule.setTipsText("");
  //     BoomEngineAPI.instance.tools?.stopMeasurement();
  //     BoomEngineAPI.instance.tools?.startMeasurement();
  //     if (MarsModule.mars) MarsModule.mars.workspace.canDraw = true;
  //     switch (data) {
  //       case "坐标测量":
  //         {
  //           HomeModule.setTipsText("左键选点，右键暂停，右键关闭暂停！");
  //           BoomEngineAPI.instance.tools?.setMeasurement(1);
  //         }
  //         break;
  //       case "直线测量":
  //         {
  //           BoomEngineAPI.instance.tools?.setMeasurement(2);
  //         }
  //         break;
  //       case "水平测量":
  //         {
  //           BoomEngineAPI.instance.tools?.setMeasurement(3);
  //         }
  //         break;
  //       case "垂直测量":
  //         {
  //           BoomEngineAPI.instance.tools?.setMeasurement(4);
  //         }
  //         break;
  //       case "面积测量":
  //         {
  //           BoomEngineAPI.instance.tools?.setMeasurement(5);
  //         }
  //         break;
  //       case "坡度测量":
  //         {
  //           BoomEngineAPI.instance.tools?.setMeasurement(7);
  //         }
  //         break;
  //       case "清除测量":
  //         {
  //           HomeModule.setTipsText("");
  //           BoomEngineAPI.instance.tools?.stopMeasurement();
  //         }
  //         break;
  //     }
  //   }

  //   async lookAt(data: any) {
  //     // await Workspace.instance.projectManager?.currentPrjInfo.acApi.camera.set(
  //     //   45952.417969,
  //     //   98342.640625,
  //     //   7377.819336 + 3000,
  //     //   -90.327553,
  //     //   -90,
  //     //   0
  //     // );
  //     this.addPanel(data);
  //   }
  //   doubleScreen() {
  //     HomeModule.setDoubleScreen(true);
  //     // HomeModule.setHidePanel(true);
  //   }

  //   deduction() {
  //     if (HomeModule.activeProject) HomeModule.setDeduction(true);
  //   }

  //   shadow() {
  //     const data = {
  //       startTime: 9,
  //     };
  //     HomeModule.setTimeLine(data);
  //   }

  //   esTateDemo() {
  //     // Workspace.instance.projectManager?.currentPrjInfo.acApi.camera.set(
  //     //   37390925.886563,
  //     //   4234204.43125,
  //     //   1234.290156,
  //     //   -34.956409,
  //     //   -128.006363,
  //     //   0.0
  //     // );
  //     const panel = {
  //       panelId: "esTateDemo",
  //       type: "",
  //       text: "不动产",
  //     };
  //     HomeModule.setActivePanel(panel);
  //     HomeModule.addPanel(panel);
  //   }

  //   clickFullScreen() {
  //     HomeModule.setFullScreen(!this.fullScreen);
  //   }

  //   imgCallback(img: any) {
  //     HomeModule.setScreenshot(false);
  //     HomeModule.setScreenshotSrc("");
  //     const panel = {
  //       panelId: "colorAnalysis",
  //       type: "",
  //       text: "色彩分析",
  //     };
  //     HomeModule.setActivePanel(panel);
  //     HomeModule.addPanel(panel);
  //     HomeModule.setColorImg(img);
  //     // setTimeout(() => {
  //     //   (this.$refs['colorAnalysis'] as any).getColorClick();
  //     // });
  //   }

  //   closeImgCallback() {
  //     HomeModule.setScreenshot(false);
  //     HomeModule.setScreenshotSrc("");
  //   }

  //   colorClick() {
  //     const divPlayer: any = document.querySelector("#Main_Rtc_Player video");
  //     let video: any = divPlayer || "";
  //     // const video: any = divPlayer
  //     const canvas: any = document.createElement("canvas");
  //     canvas.width = document.body.offsetWidth;
  //     canvas.height = document.body.offsetHeight;
  //     canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
  //     HomeModule.setScreenshotSrc(canvas.toDataURL("image/png"));
  //     HomeModule.setScreenshot(true);
  //     setTimeout(() => {
  //       this.screen = new screenShotPlugin({
  //         enableWebRtc: false,
  //         completeCallback: this.imgCallback,
  //         closeCallback: this.closeImgCallback,
  //       });
  //     });
  //   }

  //   hundredFace() {
  //     const panel = {
  //       panelId: "hundredFace",
  //       type: "",
  //       text: "百面长沙",
  //     };
  //     HomeModule.setActivePanel(panel);
  //     HomeModule.addPanel(panel);
  //   }
}
</script>

<style scoped lang="scss">
.toolbar {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  /* .bottom {
    width: calc(100% + 40px);
    height: 20px;
    background-color: rgba(8, 39, 55, 0.7);
    transform: translateX(-20px) skew(-45deg);
    position: relative;
    z-index: 1;
    border-radius: 5px;
  } */
  .box {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5;
    .item {
      margin: 0 6px -10px;
      display: flex;
      align-items: center;
      transition: all ease 0.3s;
      .img-box {
        width: 40px;
        height: 40px;
        /*background-color: rgba($color: #082737, $alpha: 0.7);*/
        display: flex;
        justify-content: center;
        align-items: center;
        /*border-radius: 4px;*/
        /*box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);*/
        /*border: 1px solid rgba(95, 191, 255, 0.6);*/
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid #4c89b6;
        box-shadow: inset 0 0 10px 2px #4c89b6;
        border-radius: 20px;
        backdrop-filter: blur(2px);
      }
      .active {
        background: linear-gradient(
          90deg,
          #2192b8 0%,
          rgba(33, 146, 184, 0.5) 50%,
          #2192b8 100%
        );
      }
      .children {
        width: 0;
        height: 32px;
        display: flex;
        align-items: center;
        overflow: hidden;
        border-radius: 0px 4px 4px 0px;
        background-color: rgba(8, 39, 55, 0.7);
        .child {
          height: 100%;
          display: flex;
          align-items: center;
          color: #fff;
          overflow: hidden;
          white-space: nowrap;

          .child-box {
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 8px;
            border-radius: 4px;
            cursor: pointer;
            z-index: 100;
            &:hover {
              background: linear-gradient(
                90deg,
                #2192b8 0%,
                rgba(33, 146, 184, 0.5) 50%,
                #2192b8 100%
              );
            }
          }
          .active-child {
            background: linear-gradient(
              90deg,
              #2192b8 0%,
              rgba(33, 146, 184, 0.5) 50%,
              #2192b8 100%
            );
          }
        }
      }
      .active-children {
        border: 1px solid rgba(95, 191, 255, 0.6);
        padding: 0 8px;
      }
    }
    .active-item {
      transform: translateY(-6px);
    }
  }
  .camera {
    max-width: 800px;
    overflow-x: auto;
    .camera-box {
      display: flex;
      align-items: center;
      .camera-item {
        width: 100px;
        height: 43px;
        padding: 10px;
        background-color: rgba(8, 39, 55, 0.7);
        text-align: center;
        border-radius: 4px;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(95, 191, 255, 0.6);
        color: #fff;
        margin-right: 20px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        &:last-child {
          margin-right: 0;
        }
        &.active {
          background: linear-gradient(
            90deg,
            #2192b8 0%,
            rgba(33, 146, 184, 0.5) 50%,
            #2192b8 100%
          );
        }
      }
    }
  }
  .camera-2 {
    position: absolute;
    top: -80px;
    max-width: 800px;
    overflow-x: auto;
    left: 50%;
    transform: translateX(-50%);
    .camera-box {
      display: flex;
      align-items: center;
      .camera-item {
        width: 100px;
        height: 43px;
        padding: 10px;
        background-color: rgba(8, 39, 55, 0.7);
        text-align: center;
        border-radius: 4px;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(95, 191, 255, 0.6);
        color: #fff;
        margin-right: 20px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        &:last-child {
          margin-right: 0;
        }
        &.active {
          background: linear-gradient(
            90deg,
            #2192b8 0%,
            rgba(33, 146, 184, 0.5) 50%,
            #2192b8 100%
          );
        }
      }
    }
  }
  .bottom-camera {
    display: flex;
    align-items: center;
  }
  .arr-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 43px;
    border-radius: 4px;
    background-color: rgba(8, 39, 55, 0.7);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(95, 191, 255, 0.6);
    color: #fff;
    font-size: 26px;
    margin-right: 20px;
    cursor: pointer;
  }
  .arr-right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 43px;
    border-radius: 4px;
    background-color: rgba(8, 39, 55, 0.7);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(95, 191, 255, 0.6);
    color: #fff;
    font-size: 26px;
    margin-left: 20px;
    cursor: pointer;
  }
  .camera {
    max-width: 800px;
    height: 43px;
    position: relative;
    overflow: hidden;
    .camera-box {
      float: left;
      transition: all 1s;
      width: max-content;
      height: 100%;
      overflow: hidden;
      align-items: center;
      position: relative;
      left: 0;
      .camera-item {
        float: left;
        width: 100px;
        height: 43px;
        padding: 10px;
        background-color: rgba(8, 39, 55, 0.7);
        text-align: center;
        border-radius: 4px;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(95, 191, 255, 0.6);
        color: #fff;
        margin-right: 20px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        position: relative;

        .camera-link {
          position: absolute;
          right: 5px;
          top: 5px;
          font-size: 12px;
        }

        &:last-child {
          margin-right: 0;
        }
        &.active {
          background: linear-gradient(
            90deg,
            #2192b8 0%,
            rgba(33, 146, 184, 0.5) 50%,
            #2192b8 100%
          );
        }
      }
    }
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
